<template>
	<div>
		<div v-for="item in $store.getters.filteredTodos" :key="item.id">
			<input
				type="checkbox"
				:checked="item.isFinished"
				@click="toggleTodo(item.id)"
			/>
			<span :class="{ finished: item.isFinished }">{{ item.text }}</span>
			<button @click="removeTodo(item.id)">Remove</button>
		</div>
	</div>
</template>

<script setup>
import { useStore } from '@/vuex'

const store = useStore()

console.log(store)

const toggleTodo = (id) => {
	store.dispatch('toggleTodo', id)
}

const removeTodo = (id) => {
	store.dispatch('removeTodo', id)
}
</script>
